<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="/styles/main.css">
  <script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
   <script type="text/javascript">
	$(function(){
	$('.list').hide().fadeIn(2000);
	$('#hypothesisContent').hide();
	$('#scenarioContent').hide();
	$('#evaluationContent').hide();
	$('#addStepForm').hide();	

	var fadeInTime = 200;
	var animationTime = 1000;
	var slideUpAnimationTime = 500;
	var isHypothesis = false;
	var isScenario = false;
	var isEvaluation = false;

	$('.simpleLink').click(function() {
		if($(this).attr("class") == "simpleLink hypothesis") {
			if (isHypothesis == false) {
				$('.hypothesis').slideDown(slideUpAnimationTime);
				   $('#hypothesisContent').fadeIn(fadeInTime);
				isHypothesis = true;
			}
			else {
				$('.hypothesisContent').slideUp(slideUpAnimationTime);
				   $('#hypothesisContent').fadeOut(fadeInTime);
				isHypothesis = false;
			}
		};
		if ($(this).attr("class") == "simpleLink scenario") {
			if (isScenario == false) {
				$('.scenario').slideDown(slideUpAnimationTime);
				$('#addStep').fadeIn(0);
				$('#scenarioContent').fadeIn(fadeInTime);
				isScenario = true;
			}
			else {
				$('#addStepForm').hide();
				$('#scenarioContent').slideUp(slideUpAnimationTime);				
				$('#scenarioContent').fadeOut(fadeInTime);
				isScenario = false;
			}
			};
		if ($(this).attr("class") == "simpleLink evaluation") {
			if (isEvaluation == false) {
				$('.evaluation').slideDown(slideUpAnimationTime);
			  	$('#evaluationContent').fadeIn(fadeInTime);
				isEvaluation = true;
			}
			else {
				$('#evaluationContent').slideUp(slideUpAnimationTime);
			  	$('#evaluationContent').fadeOut(fadeInTime);
				isEvaluation = false;
			}
			};
		});

	$('#addStep').click(function() {
		$(this).fadeOut(fadeInTime);
		$('#addStepForm').fadeIn(fadeInTime);	
	});
	});
   </script> 
</head>

<body id="body">

	<div class="bodyClass">
	<h2>{{ experiment.name }}</h3>
	<div class="list hypothesis" id="hypothesisLink"><a id="simpleLink" class="simpleLink hypothesis" href="#">Hypothesis</a>
		<div id="hypothesisContent">s{{ experiment.hypothesis }}</div>
	</div>
	<div class="list scenario" id="scenarioLink"><a id="simpleLink" class="simpleLink scenario" href="#">Scenario</a>
		<div id="scenarioContent"> 
        {% for scenario in scenarios %}
          <h4>Variables:</h4>
          <div id="result" style="text-align: left;">
          <ul>
          {% for v in scenario.variables %}
          <li>{{v}}</li>
          {% endfor %}
          </ul>
          </div>
          <form action="/addvar" method="post" id="addVarForm">
          <input type="hidden" name="scenario" value="{{scenario.key}}"></input>
          <input type="text" name="var" id="newVar"></input><input type="submit" value="add"></input>
</form>          
<hr/>
          <h4>Steps:</h4>
	<div id="addStepForm">
		<form action="/addstep" method="POST">
	          <input type="hidden" name="scenario" value="{{scenario.key}}"></input>
		{{ step_form }} 
		</br>
		{% for v in scenario.variables %}
		<input type="checkbox" value="{{v}}" name="variables">{{v}}</input></br>
		{% endfor %}
		<input type="submit" value="save"></input>
		</form>
	</div>
	  <ul style="text-align: left;">
	  {% for x in scenario.steps %}
	  <li>{{x.description}} {{x.repeat}} {{x.timeout}} <ul>{% for var in x.variables %}<li>{{var}}</li>{% endfor %}</ul></li>
	  {% endfor %}
	  </ul>	
	{% endfor %}	
	<a href="#" class="button" id="addStep">Add a step</a>	
	</div>
	
	</div>
	<div class="list evaluation" id="evaluationLink"><a id="simpleLink" class="simpleLink evaluation" href="#">Evaluation</a>
		<div id="evaluationContent">
		<a href="#" class="button" id="evaluate">Evaluate!</a>		
		</div>
	</div>

</body>
<script>
  // attach a submit handler to the form
  $("#addVarForm").submit(function(event) {

    // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        term = $form.find( 'input[name="scenario"]' ).val(),
        url = $form.attr( 'action' ), variable=$form.attr( 'var' ).value;

    // Send the data using post and put the results in a div
    $.post( url, { scenario: term, var: variable } ,
      function( data ) {
          $("#newVar").val("");
          var content = $( data ).find( '#result' );
          $( "#result" ).html( content );
      }
    );
  });
</script>

</html>
